<template>
  <div id="login">
    <div class="main">
      <h4 class="title">
        <div class="normal-title">
          <a href="/login">登录</a>
          <span>·</span>
          <a class="active" href="/register">注册</a>
        </div>
      </h4>

      <div class="login-container">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-tooltip content="码云" placement="bottom">
              <el-button type="danger" circle @click="goAuth('gitee')" :disabled="loginType.gitee">
                <i class="iconfont icon-mayun" style="font-size: 25px;"></i>
              </el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="6">
            <el-tooltip content="码云" placement="bottom">
              <el-button type="danger" circle @click="goAuth('gitee')" :disabled="loginType.gitee">
                <i class="iconfont icon-mayun" style="font-size: 25px;"></i>
              </el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="6">
            <el-tooltip content="QQ" placement="bottom">
              <el-button type="primary" circle @click="goAuth('qq')" :disabled="loginType.qq">
                <i class="iconfont icon-qq" style="font-size: 25px;"></i>
              </el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="6">
            <el-tooltip content="微信" placement="bottom">
              <el-button type="success" circle @click="goAuth('wechat')" :disabled="loginType.wechat">
                <i class="iconfont icon-weixin" style="font-size: 25px;"></i>
              </el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";

export default {

  data() {
    return {
      // 登录类别
      loginType: {
        password: false,
        gitee: false,
        github: false,
        qq: false,
        wechat: false
      },
    }
  },
  methods: {
    goAuth(source) {
      var params = new URLSearchParams();
      params.append("source", source);
      login(params).then(response => {
          window.location.href = response.data
      });
    }
  },
}
</script>

<style lang="less">
#login {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("http://qftk4xhm3.hn-bkt.clouddn.com/background.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  .main {
    .normal-title {
      text-align: center;
    }
    width: 400px;
    padding: 50px 50px 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    display: inline-block;
    .title {
      a {
        margin: 0 30px;
      }
      margin: 0 auto 50px;
      padding: 10px;
      font-weight: 400;
      color: #969696;
    }

    .login-container {
      text-align: center;
    }
  }
}
</style>